<template >
    <div class='container'>
        <el-dialog title="编辑学科" :visible="editDialogVisible" width="20%" @close="resetSub">
      <!-- 主体区域 -->
      <el-row>
        <el-col>
          <el-form :model="editData" :rules="rules" ref="addSubjectsFrom" label-width="80px" class="demo-ruleForm">
            <el-form-item label="学科名称" prop="subjectName">
              <el-input v-model="editData.subjectName" placeholder="请输入学科名称"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <span class="subspan">是否显示</span>
        <el-switch v-model="editData.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"
   > </el-switch>
      </el-row>
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetSub">取 消</el-button>
        <el-button type="primary" @click="updateSubjeect" >确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
// 引入学科编辑的方法
import { update as updateSubject } from '@/api/hmmm/subjects'
export default {
  props: {
    editDialogVisible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object
    }
  },
  data () {
    return {
      // 控制switch的状态
      SubSwitchValue: true,
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // computed: {
  //   isFrontDisplay () {
  //     if (this.SubSwitchValue) {
  //       return 1
  //     } else {
  //       return 0
  //     }
  //   }
  // },
  methods: {
    resetSub () {
      this.$emit('update:editDialogVisible', false)
    },
    // 编辑框点击确认
    updateSubjeect () {
      // 调用更新方法，传入对象
      updateSubject({
        id: this.editData.id,
        subjectName: this.editData.subjectName,
        isFrontDisplay: this.editData.isFrontDisplay
      })
        .then(() => {
        // 更新之后提示用户修改成功
          this.$message.success('更新成功')
          // 关闭弹框
          this.$emit('update:editDialogVisible', false)
          // 告诉父组件我做完了
          this.$emit('done')
        })
    }
  }
}
</script>
<style scoped>
.container .subspan {
  font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    margin-left: 10px;
}
.container el-switch {
  margin-left: 10px;
}
</style>
